<template>
    <div id="main-body" class="bg-primary-100 flex justify-center h-screen">
        <section class="container flex justify-center items-center rounded">
            <div class="hidden md:block">
                <img src="../assets/images/bg.png" alt="" class="rounded-l max-h-[500px]">
            </div>
            <div class="rounded-r w-80 h-[500px] my-8 px-2 py-4 bg-white shadow shadow-gray-300">
                <div class="text-center text-lg py-6">
                    用户登录
                </div>
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="px-4" id="register_from">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
                            show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submitForm" class="w-full">
                            登录
                        </el-button>
                    </el-form-item>
                    <div class="text-center text-sm my-2">
                        <span class="text-left text-green-500">
                            <router-link to="/reset_password">忘记密码?</router-link>
                        </span>
                        没有账号
                        <a class="text-blue-500" href="/register">去注册</a>
                    </div>
                </el-form>
            </div>
        </section>
    </div>

</template>

<script setup>
defineOptions({
    name: 'Login',

})

import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/index'
import userApi from '@/api/user'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

const loginForm = reactive({
    username: '',
    password: ''
})
const loginRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})
const loginFormRef = ref(null)
const loading = ref(false)
const submitForm = async () => {
    loginFormRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true
            const res = await userApi.login(loginForm)
            loading.value = false
            if (res.access && res.refresh) {
                userStore.login(res.access,res.refresh,{ username: loginForm.username })
                router.push({ name: 'home' })
            } else {
                console.log(res)
                ElMessage.error('登录失败')
            }
        }
    })
}
const handleKeydown = (e) => {
    if (e.key === 'Enter') {
        submitForm()
    }
}
onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
})
onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
})


</script>
